<form action="/" method="post" [formGroup]="formModel" (ngSubmit)="onSubmit(formModel)">
  <nz-form-item>
    <nz-form-label nzSm="3">用户名</nz-form-label>
    <nz-form-control nzSm="6">
      <input type="text" value="" nz-input formControlName="userName" [class.hasError]="!this.formModel.get('userName').valid&&this.formModel.get('userName').touched"/>
      <!--<nz-form-explain [hidden]="!this.formModel.hasError('required','userName')">{{this.formModel.getError('required','userName')}}</nz-form-explain>-->
      <nz-form-explain [hidden]="!this.formModel.hasError('required','userName')||this.formModel.get('userName').untouched">用户名是必填项</nz-form-explain>
      <nz-form-explain [hidden]="!this.formModel.hasError('minlength','userName')||this.formModel.get('userName').untouched">用户名长度最小为6</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label nzSm="3">手机</nz-form-label>
    <nz-form-control nzSm="6">
      <input type="text" value="" nz-input formControlName="mobile" [class.hasError]="!this.formModel.get('mobile').valid&&this.formModel.get('userName').dirty"/>
      <nz-form-explain [hidden]="!this.formModel.hasError('mobile','mobile')||this.formModel.get('mobile').pristine">{{this.formModel.getError('mobile','mobile')}}</nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label nzSm="3">时间</nz-form-label>
    <nz-form-control nzSm="6">
      <nz-time-picker formControlName="date" nzShowTime></nz-time-picker>
    </nz-form-control>
  </nz-form-item>
  <div formGroupName="pwdGroup">
    <nz-form-item>
      <nz-form-label nzSm="3">密码</nz-form-label>
      <nz-form-control nzSm="6">
        <input type="password" value="" nz-input formControlName="pwd" [class.hasError]="!this.formModel.get(['pwdGroup','pwd']).valid&&this.formModel.get(['pwdGroup','pwd']).touched" />
        <nz-form-explain [hidden]="!this.formModel.hasError('required',['pwdGroup','pwd'])||this.formModel.get(['pwdGroup','pwd']).untouched">密码是必填项</nz-form-explain>
        <nz-form-explain [hidden]="!this.formModel.hasError('minlength',['pwdGroup','pwd'])||this.formModel.get(['pwdGroup','pwd']).untouched">密码长度最小为6</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzSm="3">确认密码</nz-form-label>
      <nz-form-control nzSm="6">
        <input type="password" value="" nz-input formControlName="pwdConfirm" />
        <nz-form-explain [hidden]="!this.formModel.hasError('equal','pwdGroup')">{{this.formModel.getError('equal','pwdGroup')}}</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
  </div>
  <nz-form-item>
    <nz-form-label nzSm="3">邮箱</nz-form-label>
    <nz-form-control nzSm="6">
      <div formArrayName="emails">
        <input type="email" value="" [formControlName]="i" nz-input  *ngFor="let email of this.formModel.get('emails').controls;let i=index"/>
      </div>
      <button type="button" nz-button nzType="primary" (click)="addEmail($event)" nzPrefixIcon="anticon anticon-add">添加邮箱</button>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control nzSpan="6" nzOffset="3">
      <input type="submit" value="提交" nz-button nzType="default" />
    </nz-form-control>
  </nz-form-item>
</form>
<p>{{this.formModel.value|json}}</p>
<p>{{this.formModel.status}}</p>
